<template>
  <view class="tree-node">
    <!-- 节点内容区 -->
    <view class="node-content" @click.stop="toggleNode">
      <!-- 展开/折叠图标 -->
      <view class="expand-icon" v-if="list.isLeaf">
<!--        <image style="width: 20rpx;height: 20rpx;"-->
<!--               :src="list.expanded?IMAGE_CONFIG.zhanKai:IMAGE_CONFIG.shouqi"></image>-->
        <img class="chapter-arrow-img" :class="{ open: list.expanded }" :src="IMAGE_CONFIG.shouqi" />

      </view>
      <!-- 节点文本 -->
      <view class="node-text">
        <view class="title" style="">
          <image v-if="list.isFinished" class="icon" :src="IMAGE_CONFIG.wanCheng" style="margin-right: 10rpx;margin-bottom: -6rpx"></image>

          {{ list.title }}
        </view>
        <view class="time-info" v-if="!list.isLeaf" style="display: flex; align-items: center;">
          <image class="icon" :src="IMAGE_CONFIG.time"></image>
          <view class="text-time">
            {{ list.duration }}分钟
          </view>
        </view>
      </view>
    </view>

    <!-- 子节点区域 -->
    <view class="children" :class="{ 'slide-down': list.expanded }">
      <Tree
        v-for="(child,index) in list.children"
        :key="child.id || index"
        :courseOutline="child"
        :isBuy="isBuy"
        @toggle="onToggle"
      />
    </view>
  </view>
</template>

<script>
import Tree from './tree.vue';
import {IMAGE_CONFIG} from '@/utils/imageConfig'

export default {
  // name: 'TreeChildren',
  components: {Tree},
  props: {
    courseOutline: {
      type: Object,
      required: true
    },
    isBuy: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      IMAGE_CONFIG: IMAGE_CONFIG.index,
      TreeComponent: null,
      list: {}
    }
  },
  onReady() {
    this.list = this.courseOutline
  },
  methods: {
    // 切换节点展开/折叠状态
    toggleNode() {

      // 如果节点未展开且不是叶子节点，则加载子节点
      if (!this.list.isLeaf) {
        // 触发加载事件
        this.$emit('toggle', this.list, (children) => {
          this.$set(this.list, 'children', children);
          this.$set(this.list, 'expanded', true);
        });
      } else {
        // 叶子节点（无子节点），直接展开
        this.$set(this.list, 'expanded', !this.list.expanded);
        this.$emit('toggle', this.list);
      }
    },

    // 监听子节点事件并向上传递
    onToggle(list) {
      this.$emit('toggle', list);
    }
  }
};
</script>

<style lang="scss" scoped>
.icon {
  width: 30rpx;
  height: 30rpx;
}

.chapter-arrow-img {
  width: 18px;
  height: 20px;
  margin-top: 6px;
  transition: transform 0.2s;
  display: inline-block;
  &.open {
    transform: rotate(90deg);
  }
}
// 树节点样式
.tree-node {
  padding-left: 24rpx;
  display: block !important; /* 确保可见 */

  // 节点内容
  .node-content {
    width: 100%;
    display: flex;
    align-items: center;
    height: 80rpx;
    padding: 0 24rpx;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;

    // 展开/折叠图标
    .expand-icon {
      width: 40rpx;
      text-align: center;
      color: #999;
    }

    .text-time {
      min-width: 80rpx;
      margin-left: 10rpx;
      font-size: 24rpx;
    }

    // 节点文本
    .node-text {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      position: relative;
      display: flex;
      align-content: center;
      justify-content: space-between;
    }

    // 加载状态
    .loading-icon {
      width: 40rpx;
      text-align: center;
      color: #007AFF;
      animation: rotate 1s linear infinite;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }

  // 子节点区域
  .children {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: all 0.4s cubic-bezier(.55,0,.1,1);
    padding-left: 6%;
  }
  .children.slide-down {
    max-height: 1000px;
    opacity: 1;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
  }
}
</style>